<template lang="html">
  <div class="messagebox-container">
    <as-header title="MessageBox" fixed>
      <router-link to="/" slot="left" class="link">
        <span class="iconfont icon-zuosanjiao"></span>
      </router-link>
    </as-header>
    <as-button @click.native="showAlert">Alert 示例</as-button>
    <as-button @click.native="showConfirm">Confirm 示例</as-button>
    <as-button @click.native="showPrompt">Prompt 示例</as-button>
  </div>
</template>

<script>
export default {
  methods: {
    showAlert: function() {
      this.$MessageBox.alert({
        title: 'alert 标题',
        text: 'alert 文字'
      })
    },
    showConfirm: function() {
      this.$MessageBox.confirm({
        title: 'confirm 标题',
        text: '是否确认？',
        onConfirm(instance) {
          alert('确定！')
          instance.open = false
        },
        onCancel(instance) {
          alert('取消！')
          instance.open = false
        }
      })
    },
    showPrompt: function() {
      this.$MessageBox.prompt({
        title: 'prompt 标题',
        text: '请输入',
        onConfirm(instance) {
          alert(`输入值为：${instance.inputValue}`)
          instance.open = false
        },
        validate(val) {
          return !!val
        }
      })
    }
  }
}
</script>

<style lang="scss">
.messagebox-container {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;

  &>button {
    margin-top: 30px;
  }

  .app-header-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }
}
</style>
